
<!-- 设计师个人中心里的作品详细  完结  -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE>
<html>

	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/header_changeLi.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/popBox.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery-ui.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/bootstrap.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/changeA.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/page_match.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/words_deal.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/liked_coll.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery.slider.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/flickity-docs.min.js"></script>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/designer/individual_clothes_detail.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/main_head.css'>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/common/font-awesome.min.css">
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/bootstrap/bootstrap.min.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/flickity-docs.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/tabe.min.css'>
		<link href="${pageContext.request.contextPath}/css/bootstrap/bootstrap-combined.min.css" rel="stylesheet" media="screen">
		<link href="${pageContext.request.contextPath}/css/common/page.css" rel="stylesheet">
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/designer/want_buy.css'>
		<title></title>
	</head>

	<body>
		<div class="con">

			<!--轮播图显示-->
			<div id="pagebody">

				<div id="mainbody">
					<div class="span9" id="span9left">
						<ul id="myTab" class="nav nav-tabs">
							<li class="active"><a href="#info" data-toggle="tab">信息</a></li>
							<li><a href="#match" data-toggle="tab">相关</a></li>
							<li><a href="#comment" data-toggle="tab" id="clickBrand">评论</a></li>
						</ul>
						<div id="myTabContent" class="tab-content">
							<div class="tab-pane fade in active" id="info">
								<div id="sidebar">
									<!--中间-->
									<div class="main">
										<div class="gallery">
											<div class="content-wrap">
												<div class="example duo">
													<div class="example__demo duo__cell">
														<div class="gallery js-flickity" data-flickity-options='{ "wrapAround": true }'>
															<c:if test="${design.effect_url!=null}">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.effect_url}"
													alt=""></a>
											</div>
										</c:if>

										<c:if test="${design.garment_fashion_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.garment_fashion_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.artwork_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.artwork_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.fabrics_pic_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.fabrics_pic_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.clothes_pic_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.clothes_pic_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.other_pic_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.other_pic_url}"
													alt=""></a>
											</div>
										</c:if>
														</div>
													</div>
												</div>
											</div>
										</div>

									</div>
									<div class="posts">
										<div class="detailed">
											<h4>详细信息</h4>
											<table>
												<tr>
													<td width="58px">名称:</td>
													<td>${design.name}</td>
												</tr>
												<tr>
													<td>专辑:</td>
													<td>${design.special.name}</td>
												</tr>
												<tr>
													<td>分类:</td>
													<td>${design_class.name}</td>
												</tr>
												<tr>
													<td>风格:</td>
													<td>${design_style.value}</td>
												</tr>
												<tr>
													<td>款式:</td>
													<td>${design_pattern.value}</td>
												</tr>
												<tr>
													<td>喜欢人数:</td>
													<td>${design.liked}</td>
												</tr>
												<tr>
													<td>收藏人数:</td>
													<td>${design.collected}</td>
												</tr>
												<span class="intro">简介:</span>
												<p class="intro introText">${design.description}</p>
											</table>
										</div>
									</div>
								</div>
							</div>
							<div class="tab-pane fade" id="match">
								<div class="design">
									<div class="special">
										<a>相似作品</a>
									</div>
									<div class="slider-box slider-box1">
										<a href='javascript:;' class="slider-prev slider-btn slider-prev1"></a>
										<div class="slider-wrapper slider-wrapper1">
											<ul class='slider-move slider-move1'>
												<c:if test="${similarDesign!=null }">
													<c:forEach items="${similarDesign}" var="similarDesign">
														
														<li>
														<a href="${pageContext.request.contextPath}/design/show_design_detail.do?design_id=${similarDesign.id}"> 
															<img src="${pageContext.request.contextPath }/${similarDesign.effect_url}">
 														</a> 
														</li>
													</c:forEach>
												</c:if>
													
											</ul>
										</div>
										<a href='javascript:;' class="slider-next slider-btn slider-next1"></a>
									</div>
								</div>

								<div class="design">
									<div class="special2">
										<a>匹配面料</a>
									</div>
									<div class="slider-box slider-box2">
										<a href='javascript:;' class="slider-prev slider-btn slider-prev2">向上</a>
										<div class="slider-wrapper slider-wrapper2">
											<ul class='slider-move slider-move2'>
											<c:if test="${fabrics!=null}">
												<c:forEach var="fabrics" items="${fabrics}">
												<li>
														<a href="${pageContext.request.contextPath}/fabric/show_fabric_detail.do?fabric_id=${fabrics.id}"> 
															<img src="${pageContext.request.contextPath }/${fabrics.photo_url1}">
 														</a> 
												</li>
												</c:forEach>
											</c:if>
													
											</ul>
										</div>
										<a href='javascript:;' class="slider-next slider-btn slider-next2">向下</a>
									</div>
								</div>
								<div class="design">
									<div class="special">
										<a>匹配服装</a>
									</div>
									<div class="slider-box slider-box3">
										<a href='javascript:;' class="slider-prev slider-btn slider-prev3">向上</a>
										<div class="slider-wrapper slider-wrapper3">
											<ul class='slider-move slider-move3'>
												<c:if test="${clothings!=null}">
												<c:forEach var="clothings" items="${clothings}">
												<li>
														<a href="${pageContext.request.contextPath}/clothing/show_clothing_detail.do?clothing_id=${clothings.id}"> 
															<img src="${pageContext.request.contextPath }/${clothings.photo_url1}">
 														</a> 
												</li>
												</c:forEach>
											</c:if>
											</ul>
										</div>
										<a href='javascript:;' class="slider-next slider-btn slider-next3">向下</a>
									</div>
								</div>

							</div>

							<div class="tab-pane fade" id="comment">
								<div class="content-form">
									<div id="ping">
										<div class="tech-news-grids">
											<c:if test="${comments!=null }">
												<c:forEach items="${comments}" var="comments" >
												<div class="tech-news-grid span_66">
													<img style="width: 20px;height: 20px;" src="${pageContext.request.contextPath }/${comments.user.photo_link}" />
													${comments.user.username}：
													<!--用户名-->
													<p>${comments.content}</p>
													<!--评论内容-->
												</div>
												</c:forEach> 
											</c:if>
											 
											<div class="clearfix"></div>

										</div>
										<!--分页-->
										<div class="paging">
											<div style="display: none;">
												<span class="pages">${data.property.pageCount}</span>
												<!--页数-->
												<span class="pageIndex">${data.property.pageIndex}</span>
												<!--当前页码-->
												<span class="pagesize">3</span>
												<!--每页记录数-->
												<span class="hasNext">${data.property.hasNext}</span>
												<!--是否有下一页(boolean)-->
												<span class="selfUrl">/special/getSpecial.do</span>
												<!--请求action-->
												<span class="userId">${user_id}</span>
												<!--用户ID-->
												<span class="commonUrl">${pageContext.request.contextPath}</span>
												<!--绝对路径-->
											</div>
											<div class="showPaging">
												<a class="prev" href="${pageContext.request.contextPath}/demand/getSpecial.do?designer_id=${designer_id }&pageindex=${json.property.pageIndex-1 }&pagesize=4">
					上一页</a>
												<select class="pageNum">
													<option value="0">请选择跳转的页数</option>
													<option value="1">第1页</option>
													<option value="2" selected="">第2页</option>
												</select>
												<a class="next" href="${pageContext.request.contextPath}/demand/getSpecial.do?designer_id=${designer_id }&pageindex=${json.property.pageIndex+1 }&pagesize=4">
					下一页</a>
											</div>
										</div>
										<!--分页结束-->

									</div>
								</div>
							</div>
						</div>

						<script>
							$(function() {
								$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
									// 获取已激活的标签页的名称
									var activeTab = $(e.target).text();
									// 获取前一个激活的标签页的名称
									var previousTab = $(e.relatedTarget).text();
									$(".active-tab span").html(activeTab);
									$(".previous-tab span").html(previousTab);
								});
							});
						</script>
					</div>
				</div>
			</div>

		</div>
	</body>

</html>